import React, { Component, createRef } from 'react'
import { Modal, Form, message } from 'antd'
import { post } from '@/lib'
import { FormTextItem, } from '@/components/index.js'
// import { connect } from 'react-redux'
// import store from '@/store' // 引入全局状态

export default class Detail extends Component {
  // 创建一个form的引用
  formRef = createRef();
  imageRef = createRef(); // 图片组件的引用
  state = {
    visible: false, // 是否显示
    record: null, // 传过来的值
    parent: null, // 上级机构
    isModify: false, // 是否是修改
  };
  // 提供一个方法给父组件打开这个弹窗
  showCreateChild = (parent) => { // 创建下级机构
    this.setState({
      visible: true,
      parent,
    });
  }
  show = (record) => {
    this.setState({
      visible: true,
      parent:null,  //清除上级机构
      record,
      isModify: !!record, // 如果传了record，就是修改，否则就是新增
    });
  }
  submit = async () => { // 提交接口
    const { record, parent, isModify } = this.state;
    const { refreshList } = this.props; // 父组件传下来的属性列表函数
    const values = await this.formRef.current.validateFields().catch(e => { });
    if (!values) return;
    values.organizationId = parent?.id; // 设置父级组织的id
    // 修正head字段
    // return console.log('=================values', values);
    // 如果是修改，需要设置id
    let url = '/create/organization';
    if (isModify) {
      values.id = record.id;
      url = '/modify/organization';
    }
    const data = await post(url, values);
    if (!data.success) {
      return alert(data.message);
    }
    message.success(isModify ? '修改成功' : '新增成功');

    const selectedNode = isModify? data.result : parent

    // 刷新列表
    refreshList && refreshList(); // 先判断一下
    this.setState({ visible: false });
  }

  render() {
    const { visible, record, parent, isModify } = this.state;
    return (
      visible && // 直接刷新一下dom
      <Modal
        title={isModify ? '修改组织' : '新增组织'}
        centered
        open={visible}
        onOk={this.submit}
        onCancel={() => this.setState({ visible: false })}
        width={800}
      >
        <Form
          ref={this.formRef}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{ // 初始值
            name: record?.name,
            description: record?.description,
          }}
          autoComplete="off"
        >
          { parent && <Form.Item label="上级机构">{ parent.name }</Form.Item> }
          <FormTextItem label="组织机构名称" name="name" />
          <FormTextItem label="组织机构描述" name="description" />
        </Form>
      </Modal>
    )
  }
}